<template>
  <div class="order">
    <!-- 表格 -->
    <div class="table">
      <el-table :data="orderData" style="width: 100%">
        <el-table-column prop="order_time" label="交易时间"></el-table-column>
        <el-table-column prop="order_number" label="桌号"></el-table-column>
        <el-table-column prop="order_diners" label="用餐人数" ></el-table-column>
        <el-table-column label="菜品详情">
          <template>
            <el-button >详细菜单</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="order_amount" label="交易金额"> </el-table-column>
        <el-table-column label="交易状态">
          <template >
            <el-button size="mini" type="success">已结账</el-button>
            <el-button size="mini" type="danger">未结账</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { axios } from "@/utils/api";
export default {
  data() {
    return {
      // 表格数据
      orderData: [],
      // 请求数据参数
      orderGet: {
        page: 0,
        table_number: "",
        order_time: "[]",
      },
      // 菜单详细数组
      goodList: [],
    };
  },
  mounted() {
    this.getData();
  },

  methods: {
    // 请求数据
    async getData() {
      let res = await axios.ObtainOrder(this.orderGet);
      // console.log(res, "数据");
      let {
        data: {
          data: { result, total },
        },
      } = res;
      this.orderData = result;
      this.total = total;
    },

  },
};
</script>
<style lang="scss" scoped>
.order{
    width: 100%;

}
</style>
